<template>
  <span>
    <div>
      <div class="unlogin-avatar" v-if="!verifyLogin">
        <router-link :to="{ name: 'login' }" target="_blank">登录</router-link>
      </div>
      <div v-else>
        <el-tooltip effect="light">
          <div slot="content">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-switch-button"
              @click="logout"
            >
              退出
            </el-button>
          </div>
          <el-image
            :src="avatarUrl"
            class="login-avatar"
            @click="redirectToAccount"
          >
            <div slot="error" class="image-slot" @click="redirectToAccount">
              <SvgIcon iconClass="default-avatar" class="login-avatar">
              </SvgIcon>
            </div>
          </el-image>
        </el-tooltip>
      </div>
    </div>
  </span>
</template>
<script>
import { getToken, delToken } from "@/utils/auth";
import { isEmpty } from "@/utils/validate";
export default {
  inject: ["reload"],
  data() {
    return {
      avatarUrl: this.$store.getters.avatar,
    };
  },
  computed: {
    verifyLogin() {
      return getToken();
    },
  },
  methods: {
    logout() {
      localStorage.clear();
      sessionStorage.clear();
      delToken();
      this.reload();
    },
    redirectToAccount() {
      let url = this.$router.resolve({
        name: "account",
        params: { uuid: this.$store.getters.uuid },
      });
      window.open(url.href, "_blank");
    },
    hasAvatar() {
      if (isEmpty(this.avatarUrl)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style scoped>
.unlogin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 36px;
  font-size: 14px;
  color: #00d684;
  background-color: #f6f6f7;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}
.login-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}
</style>